<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
    OfficeBuilding,
    Tickets,
    Star,
    PriceTag,
    LocationInformation,
    UserFilled,
    Trophy,
    Briefcase,
    Promotion,
    Link,
    ChatLineRound,
    TrendCharts,
    Collection,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

/*企业信息接口定义 */
interface Company {
    id: string;
    name: string;
    logo: string;
    scale: string;
    companyType: string;
    industry: string;
    tags: string[];
    benefits: string[];
    jobCount?: number;
    rating?: number;
    isHot?: boolean;
    isTop?: boolean;
    location?: string;
}

// 组件props定义
const props = defineProps({
    companies: {
        type: Array as () => Company[],
        default: () => [],
    },
    maxDisplay: {
        type: Number,
        default: 6,
    },
    showFilter: {
        type: Boolean,
        default: true,
    },
});

// 默认企业数据
const defaultCompanies = ref([
    {
        id: "1",
        name: "深桥寻",
        logo: "https://via.placeholder.com/50",
        scale: "C轮及以上",
        companyType: "10000人以上",
        industry: "教育培训",
        location: "北京",
        tags: ["校招", "五险一金", "不要穿西装"],
        benefits: ["五险一金", "年终奖", "定期体检", "加班补助", "年假", "节日福利"],
        jobCount: 42,
        rating: 4.5,
        isHot: true,
        isTop: true,
    },
    {
        id: "2",
        name: "天池传媒",
        logo: "https://via.placeholder.com/50",
        scale: "不需要融资",
        companyType: "1000-9999人",
        industry: "互联网/计算机软件",
        location: "上海",
        tags: ["校招", "不要穿西装"],
        benefits: ["五险一金", "年终奖", "定期体检", "员工旅游", "免费班车", "节日福利"],
        jobCount: 28,
        rating: 4.2,
        isHot: true,
    },
    {
        id: "3",
        name: "精迅教育",
        logo: "https://via.placeholder.com/50",
        scale: "不需要融资",
        companyType: "1000-9999人",
        industry: "在线教育",
        location: "广州",
        tags: ["校招", "不要穿西装"],
        benefits: ["五险一金", "全勤奖", "奖金丰厚", "股票期权", "带薪年假", "节日福利"],
        jobCount: 36,
        rating: 4.0,
        isHot: false,
    },
    {
        id: "4",
        name: "一嗨租车",
        logo: "https://via.placeholder.com/50",
        scale: "已上市",
        companyType: "1000-9999人",
        industry: "汽车服务/汽车租赁",
        location: "深圳",
        tags: ["校招", "五险一金", "加班补助"],
        benefits: ["五险一金", "加班补助", "免费班车", "员工旅游", "节日福利", "年终奖"],
        jobCount: 15,
        rating: 4.3,
        isHot: true,
    },
    {
        id: "5",
        name: "好未来",
        logo: "https://via.placeholder.com/50",
        scale: "已上市",
        companyType: "10000人以上",
        industry: "互联网",
        location: "北京",
        tags: ["校招", "五险一金", "不要穿西装"],
        benefits: ["健身房", "年终奖", "弹性工作", "定期体检", "年假", "餐补"],
        jobCount: 52,
        rating: 4.7,
        isHot: true,
        isTop: true,
    },
    {
        id: "6",
        name: "中青博联",
        logo: "https://via.placeholder.com/50",
        scale: "已上市",
        companyType: "1000-9999人",
        industry: "旅游",
        location: "杭州",
        tags: ["校招", "五险一金", "带薪年假"],
        benefits: ["五险一金", "加班补助", "健身房", "员工旅游", "定期体检", "节日福利"],
        jobCount: 23,
        rating: 4.1,
        isHot: false,
    },
]);

// 实际展示的数据
const displayedCompanies = computed(() => {
    return props.companies.length > 0 ? props.companies : defaultCompanies.value;
});

// 当前筛选条件
const currentFilter = ref("all");
const filters = [
    { label: "全部企业", value: "all" },
    { label: "互联网/IT", value: "互联网" },
    { label: "教育培训", value: "教育" },
    { label: "金融", value: "金融" },
    { label: "汽车服务", value: "汽车" },
    { label: "旅游", value: "旅游" },
];

// 筛选后的企业列表
const filteredCompanies = computed(() => {
    if (currentFilter.value === "all") {
        return displayedCompanies.value.slice(0, props.maxDisplay);
    } else {
        return displayedCompanies.value
            .filter((company) => company.industry.includes(currentFilter.value))
            .slice(0, props.maxDisplay);
    }
});

// 路由实例
const router = useRouter();

/**
 * 跳转到企业详情页
 * @param id - 企业ID
 */
const goToCompanyInfo = (id: string) => {
    router.push({
        path: "/companyInfo",
        query: { id },
    });
};

/**
 * 跳转到企业职位列表页
 * @param id - 企业ID
 * @param event - 事件对象，阻止事件冒泡
 */
const goToCompanyJobs = (id: string, event: Event) => {
    if (event) {
        event.stopPropagation();
    }
    router.push({
        path: "/schoolHireInfo",
        query: { companyId: id },
    });
};

/**
 * 跳转到实习职位列表页
 * @param id - 企业ID
 * @param event - 事件对象，阻止事件冒泡
 */
const goToInternJobs = (id: string, event: Event) => {
    if (event) {
        event.stopPropagation();
    }
    router.push({
        path: "/job",
        query: { companyId: id, jobType: "intern" },
    });
};

// 收藏公司
const toggleFavorite = (id: string, event: Event) => {
    if (event) {
        event.stopPropagation();
    }

    // 在实际应用中，这里应调用API更新收藏状态
    ElMessage.success("公司收藏状态已更新");
};

// 查看全部热门企业
const viewAllCompanies = () => {
    router.push("/companies");
};

// 组件挂载时执行
onMounted(() => {
    // 可以在这里加载数据
});
</script>

<template>
    <div class="hot-companies-container">
        <!-- 筛选栏 -->
        <div v-if="showFilter" class="filter-section">
            <el-radio-group v-model="currentFilter" size="small" class="filter-group">
                <el-radio-button v-for="filter in filters" :key="filter.value" :label="filter.value">
                    {{ filter.label }}
                </el-radio-button>
            </el-radio-group>

            <el-button type="primary" size="small" plain @click="viewAllCompanies" class="view-all-btn">
                查看全部 <el-icon class="el-icon--right"><Promotion /></el-icon>
            </el-button>
        </div>

        <!-- 企业卡片网格 -->
        <el-row :gutter="20">
            <el-col
                v-for="(company, index) in filteredCompanies"
                :key="company.id"
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
                :xl="8"
                class="company-col"
            >
                <el-card
                    shadow="hover"
                    class="company-card"
                    :class="{ 'is-hot': company.isHot, 'is-top': company.isTop }"
                    @click="goToCompanyInfo(company.id)"
                >
                    <!-- 热门标签 -->
                    <div v-if="company.isHot" class="hot-tag">
                        <el-tag type="danger" effect="dark" size="small">热门</el-tag>
                    </div>

                    <!-- 置顶标签 -->
                    <div v-if="company.isTop" class="top-tag">
                        <el-tag type="warning" effect="dark" size="small">置顶</el-tag>
                    </div>

                    <!-- 企业头部信息 -->
                    <div class="company-header">
                        <el-avatar :size="60" :src="company.logo" class="company-logo" shape="square">
                            <el-icon><OfficeBuilding /></el-icon>
                        </el-avatar>

                        <div class="company-title">
                            <div class="company-name">{{ company.name }}</div>

                            <div class="company-meta">
                                <el-tag effect="light" size="small" class="scale-tag">{{ company.scale }}</el-tag>
                                <div class="rating">
                                    <el-rate
                                        v-model="company.rating"
                                        disabled
                                        :colors="['#ff9900', '#ff9900', '#ff9900']"
                                        :score-template="company.rating + '分'"
                                        text-color="#ff9900"
                                        :show-score="true"
                                        :max="5"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 企业基本信息 -->
                    <div class="company-info">
                        <div class="info-item">
                            <el-icon color="#409EFF"><PriceTag /></el-icon>
                            <span>{{ company.industry }}</span>
                        </div>

                        <div class="info-item">
                            <el-icon color="#67C23A"><UserFilled /></el-icon>
                            <span>{{ company.companyType }}</span>
                        </div>

                        <div v-if="company.location" class="info-item">
                            <el-icon color="#E6A23C"><LocationInformation /></el-icon>
                            <span>{{ company.location }}</span>
                        </div>

                        <div v-if="company.jobCount" class="info-item">
                            <el-icon color="#F56C6C"><Briefcase /></el-icon>
                            <span>{{ company.jobCount }}个在招职位</span>
                        </div>
                    </div>

                    <!-- 企业标签 -->
                    <div class="company-tags">
                        <el-tag
                            v-for="(tag, tagIndex) in company.tags"
                            :key="tagIndex"
                            size="small"
                            class="company-tag"
                            :type="tagIndex === 0 ? 'success' : tagIndex === 1 ? 'warning' : 'info'"
                            effect="light"
                        >
                            {{ tag }}
                        </el-tag>
                    </div>

                    <!-- 企业福利 -->
                    <div class="company-benefits">
                        <div class="benefits-title">
                            <el-icon color="#67C23A"><Trophy /></el-icon>
                            <span>企业福利</span>
                        </div>

                        <el-scrollbar height="60px" class="benefits-scrollbar">
                            <div class="benefits-wrapper">
                                <el-tag
                                    v-for="(benefit, benefitIndex) in company.benefits"
                                    :key="benefitIndex"
                                    size="small"
                                    effect="plain"
                                    class="benefit-tag"
                                >
                                    {{ benefit }}
                                </el-tag>
                            </div>
                        </el-scrollbar>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="company-actions">
                        <el-divider content-position="center" class="actions-divider">
                            <el-icon><Link /></el-icon>
                            <span>快速访问</span>
                        </el-divider>

                        <el-row :gutter="10" class="action-buttons">
                            <el-col :span="8">
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="goToCompanyJobs(company.id, $event)"
                                    class="action-btn"
                                >
                                    <el-icon><Tickets /></el-icon>
                                    校招职位
                                </el-button>
                            </el-col>

                            <el-col :span="8">
                                <el-button
                                    type="success"
                                    size="small"
                                    @click="goToInternJobs(company.id, $event)"
                                    class="action-btn"
                                >
                                    <el-icon><Briefcase /></el-icon>
                                    实习职位
                                </el-button>
                            </el-col>

                            <el-col :span="8">
                                <el-button
                                    type="warning"
                                    size="small"
                                    @click="toggleFavorite(company.id, $event)"
                                    class="action-btn"
                                >
                                    <el-icon><Star /></el-icon>
                                    收藏
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.hot-companies-container {
    width: 100%;
}

/* 筛选区域样式 */
.filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-group {
    margin-bottom: 10px;
}

.view-all-btn {
    margin-left: auto;
}

/* 企业卡片列样式 */
.company-col {
    margin-bottom: 20px;
}

/* 企业卡片样式 */
.company-card {
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    border: 1px solid #ebeef5;
    border-radius: 8px;
}

.company-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: #c6e2ff;
}

/* 热门和置顶标签 */
.hot-tag {
    position: absolute;
    top: -8px;
    right: 20px;
    z-index: 1;
}

.top-tag {
    position: absolute;
    top: -8px;
    right: 70px;
    z-index: 1;
}

/* 特殊卡片样式 */
.company-card.is-hot {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f56c6c, #e6a23c) border-box;
}

.company-card.is-top {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #409eff, #67c23a) border-box;
}

/* 企业头部信息 */
.company-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.company-logo {
    margin-right: 15px;
    border: 1px solid #ebeef5;
    background-color: #f5f7fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.company-title {
    flex: 1;
}

.company-name {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 5px;
    line-height: 1.3;
}

.company-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scale-tag {
    display: inline-block;
    margin-bottom: 5px;
}

.rating {
    display: flex;
    align-items: center;
}

/* 企业信息项 */
.company-info {
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #606266;
    font-size: 14px;
}

.info-item .el-icon {
    margin-right: 8px;
}

/* 企业标签 */
.company-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.company-tag {
    margin-right: 0;
}

/* 企业福利 */
.company-benefits {
    margin-bottom: 20px;
}

.benefits-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #303133;
    font-weight: 500;
}

.benefits-title .el-icon {
    margin-right: 5px;
}

.benefits-scrollbar {
    border-radius: 4px;
    background-color: #f5f7fa;
    padding: 8px;
}

.benefits-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.benefit-tag {
    margin-right: 0;
    background-color: #fff;
}

/* 操作区域 */
.company-actions {
    margin-top: 15px;
}

.actions-divider {
    margin: 15px 0;
}

.actions-divider :deep(.el-divider__text) {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #909399;
    font-size: 14px;
}

.action-buttons {
    display: flex;
    justify-content: space-between;
}

.action-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn .el-icon {
    margin-right: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .filter-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .view-all-btn {
        margin-left: 0;
        margin-top: 10px;
    }

    .company-name {
        font-size: 16px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .action-buttons .el-col {
        width: 100%;
    }
}
</style>
